import React from 'react';
import { Progress } from 'antd';
import { SyncOutlined } from '@ant-design/icons'; // 添加缺失的导入
import { ResponsiveContainer, AreaChart, Area, Tooltip } from 'recharts';

const TaskSummary = ({ stats }) => {
    // 处理无数据情况
    if (!stats) {
        return (
        <div className="card task-summary">
            <h2 className="card-title">任务探查摘要</h2>
            <div className="loading-placeholder">
            <SyncOutlined spin style={{ marginRight: 10 }} />
            加载统计数据中...
            </div>
        </div>
        );
    }
    // 计算成功率百分比
    const successRate = stats.total_tasks > 0 ? 
    Math.round((stats.succ_count / stats.total_tasks) * 100) : 0;
    return (
        <div className="card task-summary">
      <h2 className="card-title">任务探查摘要</h2>
      
      <div className="stats-container">
        <div className="stat-item">
          <div className="stat-label">总任务数</div>
          <div className="stat-value">{stats.total_tasks}</div>
        </div>
        
        <div className="stat-item">
          <div className="stat-label">今日成功</div>
          <div className="stat-value">{stats.succ_count}</div>
        </div>
        
        <div className="stat-item">
          <div className="stat-label">执行中</div>
          <div className="stat-value">{stats.run_count}</div>
        </div>
        
        <div className="stat-item">
          <div className="stat-label">平均耗时</div>
          <div className="stat-value">{stats.avg_duration}秒</div>
        </div>
        
        <div className="stat-item">
          <div className="stat-label">成功率</div>
          <div className="stat-progress">
            <Progress 
              type="circle" 
              percent={successRate} 
              size={60}
              format={percent => `${percent}%`}
              strokeColor="var(--primary-color)"
            />
          </div>
        </div>
      </div>
    </div>
      );
};

export default TaskSummary;